<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineproperty方法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    let number = 18
    let person = {
        name: '张三',
        sex: '男',
    }

    // 方法的作用就是为实例定义属性
    // 这个方法有三个参数，一个是操作的对象实例，第二个是属性，第三个是方法
    Object.defineProperty(person, 'age', {
        // value: number, // 定义属性的值
        // enumerable: true, // 控制属性是否可以枚举，默认是false
        // writable: true, // 控制属性是否可以修改，默认是false
        // configurable: true, // 控制属性是否可以删除，默认是false

        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log('有人获取了age的值')
            return number
        },

        // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            console.log('有人修改了age的值，且值是', value)
            number = value
        }
    })
</script>
</html>